<template>
    <div class="my-pagination">
        <el-pagination v-model:current-page="currentPage3" :page-size="pagesize" background
            layout="prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue';
import { useGoods } from '../store/goods';
let goods = useGoods()
const currentPage3 = ref(1)
const props = defineProps(['total', 'pagesize', 'currentpage', 'modelValue'])
// currentPage3.value = props.currentpage
const emit = defineEmits()
const handleCurrentChange = (val) => {
    currentPage3.value = val
    emit('update:modelValue', val)
    goods.page = val
}
// currentPage3.value = props.modelValue
currentPage3.value = goods.page
// watch(props.currentpage, (n) => {
//     currentPage3 = n
// })

watch(
    // 监听的状态
    () => [goods.page], // 这里的 state.value 是你要监听的状态机数据

    // 回调函数，当状态发生变化时执行
    (newValue) => {
        // 在这里执行相应的操作
        // console.log(newValue);
        currentPage3.value = newValue[0]

    }
);
</script>

<style lang="scss" scoped>
.my-pagination {
    padding-bottom: .2083rem;
}
</style>

<style>
.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
    background-color: #3F7233;
    color: #fff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background-color: #fff;
    color: #333333;
    border: .0052rem solid #CCCCCC;
    border-radius: .0208rem;
}

.el-pager li:hover {
    color: #3F7233
}

.el-pagination {
    justify-content: center;
    --el-pagination-button-width: .2083rem;
    --el-pagination-button-height: .2083rem;
}
</style>